<div class="ui">
  {{#if (not @group.id)}}
    <div class="column sixteen wide center aligned mb-4">
      <h2 class="ui header center aligned">
          {{t 'Create a Group'}}
      </h2>
    </div>
  {{/if}}

  <form class="ui form {{if this.isLoading 'loading'}}" >
    <div class="d-flex space-between items-center mb-2">
      <h2 class="header">{{t 'Settings'}}</h2>
      <button type="submit" class="ui teal submit button" name="submit">{{t 'Save'}}</button>
    </div>
    <div class="field">
      <label class="required">{{t 'Group name'}}</label>
      <Input
        type="text"
        name="name"
        placeholder={{t "Name"}}
        @value={{@group.name}} />
    </div>
    <div class="field mt-4">
      <label>{{t 'About'}}</label>
      <Widgets::Forms::RichTextEditor
        @value={{@group.about}}
        @name="description" />
    </div>
    <div class="fields">
      <div class="fifteen wide field">
        <Widgets::Forms::ImageUpload
          @imageUrl={{@group.bannerUrl}}
          @needsCropper={{true}}
          @label={{t "Event Image"}}
          @id="event_image"
          @icon="camera"
          @hint={{t "Select Group Banner Image"}}
          @imageText={{t "Header Image"}}
          @isHeaderImage={{true}}
          @maxSizeInKb={{this.settings.imageSize}}
          @helpText={{t "We recommend using at least a 2160x1080px (2:1 ratio) image."}}
          @requiresDivider={{true}} />
      </div>
      <div class="five wide field">
        <Widgets::Forms::ImageUpload
          @imageUrl={{@group.logoUrl}}
          @label={{t "Logo"}}
          @id="event_logo"
          @icon="image"
          @hint={{t "Select Logo"}}
          @imageText={{t "Logo"}}
          @maxSizeInKb={{this.settings.logoSize}} />
      </div>
    </div>
    <div class="mt-4 mb-8">
      <h4>
        {{t 'Social Media'}}
        <UiPopup @content={{t "Add social link"}} @class="ui compact icon blue circular button ml-2" style="margin-left: 1rem !important;" @click={{action this.addSocialLink 'socialLink'}} @position="top center">
          <i class="plus icon"></i>
        </UiPopup>
      </h4>
      {{#each @group.socialLinks as |socialLink|}}
        {{#if (not socialLink.is_custom)}}
          <Widgets::Forms::SocialLinkField
            @site={{socialLink.name}}
            @onSiteChange={{action (mut socialLink.name)}}
            @value={{socialLink.link}}
            @onChange={{action (mut socialLink.link)}}>
            <div class="ui icon buttons">
              <UiPopup @content={{t "Remove"}} @class="ui icon red button" @click={{action this.removeSocialLink socialLink}} @position="top center">
                <i class="minus icon"></i>
              </UiPopup>
            </div>
          </Widgets::Forms::SocialLinkField>
        {{/if}}
      {{/each}}
      <h4>
        {{t 'Extra Links'}}
        <UiPopup @content={{t "Add custom link"}} @class="ui compact icon blue circular button" style="margin-left: 1rem !important;" @click={{action this.addSocialLink 'customLink'}} @position="top center">
          <i class="plus icon"></i>
        </UiPopup>
      </h4>
      {{#each @group.socialLinks as |socialLink|}}
        {{#if socialLink.is_custom}}
          <Widgets::Forms::SocialLinkField
            @custom={{true}}
            @site={{socialLink.name}}
            @onSiteChange={{action (mut socialLink.name)}}
            @value={{socialLink.link}}
            @onChange={{action (mut socialLink.link)}}>
            <div class="ui icon buttons">
              <UiPopup @content={{t "Remove"}} @class="ui icon red button" @click={{action this.removeSocialLink socialLink}} @position="top center">
                <i class="minus icon"></i>
              </UiPopup>
            </div>
          </Widgets::Forms::SocialLinkField>
        {{/if}}
      {{/each}}
    </div>
  </form>
</div>
